<template>
	<view class="forget forget-content">
			<uni-nav-bar @clickLeft="Back" left-icon="back" backgroundColor="transparent" title="找回密码" :shadow="false" :border="false"></uni-nav-bar>
		<view class="content margin-xl">
			<!-- 主体 -->
			<view class="main">
			<!-- 	<view class="tips">若你忘记了密码，可在此重置新密码。</view> -->
				<wInput
					v-model="phoneData"
					type="text"
					maxlength="11"
					placeholder="请输入手机号码"
				></wInput>
				<wInput
					v-model="passData"
					type="password"
					maxlength="11"
					placeholder="请输入新密码"
					isShowPass
				></wInput>
				
				<wInput
					v-model="verCode"
					type="number"
					maxlength="6"
					placeholder="验证码"
					
					isShowCode
					codeText="获取重置码"
					setTime="60"
					ref="runCode"
					@setCode="getVerCode()"
				></wInput>
			</view>
			
			<wButton 
				class="wbutton"
				text="重置密码"
				:rotate="isRotate" 
				@click.native="startRePass()"
			></wButton>

		</view>
	</view>
</template>

<script>
	var _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	export default {
		data() {
			return {
				phoneData: "", //电话
				passData: "", //密码
				verCode:"", //验证码
				isRotate: false, //是否加载旋转
			}
		},
		components:{
			wInput,
			wButton
		},
		mounted() {
			_this= this;
		},
		methods: {
			Back(){
				uni.navigateBack({})
			},
			getVerCode(){
				//获取验证码
				if (!this.phoneData || this.phoneData.length != 11) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '请输入正确的手机号'
				    });
				    return false;
				}
				
				// 验证手机号格式
				if (!this.phoneData.match(/^1[3-9]\d{9}$/)) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号格式不正确'
					});
					return false;
				}
				
				console.log("获取重置密码验证码");
				
				// 调用后端接口获取验证码
				this.$api.getAuthCode({
					phone: this.phoneData
				}).then(res => {
					console.log('验证码响应', res);
					
					// 处理响应数据
					if (res.data && res.data.code === 200) {
						// 触发倒计时
						this.$refs.runCode.$emit('runCode');
						
						const responseData = res.data.data;
						let message = '验证码已发送';
						
						// 开发环境会返回验证码
						if (responseData && responseData.code) {
							message = '验证码已发送：' + responseData.code;
							console.log('验证码（开发环境）：', responseData.code);
						}
						
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: message
						});
						
						// 60秒后可以重新获取
						setTimeout(function(){
							_this.$refs.runCode.$emit('runCode', 0); // 终止倒计时
						}, 60000);
					} else {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: res.data?.message || res.data?.msg || '获取验证码失败'
						});
					}
				}).catch(err => {
					console.error('获取验证码失败', err);
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '获取验证码失败，请重试'
					});
				});
			},
			startRePass() {
				//重置密码
				if(this.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				
				// 验证手机号
				if (!this.phoneData || this.phoneData.length != 11) {
				    uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '请输入正确的手机号'
				    });
				    return false;
				}
				
				// 验证手机号格式
				if (!this.phoneData.match(/^1[3-9]\d{9}$/)) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号格式不正确'
					});
					return false;
				}
				
				// 验证密码
			    if (!this.passData || this.passData.length < 6) {
			        uni.showToast({
			            icon: 'none',
						position: 'bottom',
			            title: '密码至少6位'
			        });
			        return false;
			    }
			    
			    // 验证验证码
				if (!this.verCode || this.verCode.length != 6) {
				    uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '请输入6位验证码'
				    });
				    return false;
				}
				
				this.isRotate = true;
				
				// 调用后端接口重置密码
				this.$api.resetPassword({
					phone: this.phoneData,
					password: this.passData,
					authCode: this.verCode
				}).then(res => {
					this.isRotate = false;
					console.log("重置密码响应", res);
					
					if (res.data && res.data.code === 200) {
						uni.showToast({
							icon: 'success',
							title: '密码重置成功',
							duration: 2000
						});
						
						// 延迟跳转到登录页
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login'
							});
						}, 2000);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data?.message || res.data?.msg || '重置密码失败'
						});
					}
				}).catch(err => {
					this.isRotate = false;
					console.error('重置密码失败', err);
					uni.showToast({
						icon: 'none',
						title: err.message || '重置密码失败，请重试'
					});
				});
			}
		}
	}
</script>

<style>
	.forget-content{
		width: 100vw;
		height: 100vh;
		background: url(../../static/image/login/bg.jpg) no-repeat;
		background-size: cover;
		overflow: auto;
		box-sizing: border-box;
		padding-bottom: 20rpx;
	}
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");
</style>

